<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: sun
 * @Date: 2022-03-14 23:12:24
-->
<template>
  <div class="home-container container">
    <img src="@/assets/imgs/pic/2.png" class="article-pic" />
    <p
      class="hot"
      @click="jump(item.type, item)"
      v-for="(item, index) in data"
      :key="index"
    ></p>
    <aside v-if="current && current.type != 3">
      <section class="box">
        <span class="text" v-if="current.text">{{ current.text }}</span>
        <img :src="current.img" class="wx-img" v-if="current.img" />
        <span class="closeBtn" @click="closeFn()"></span>
      </section>
    </aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: null,
      data: [
        {
          type: 3,
          url:
            'https://weixin.1919.cn/b2c1919/#/singlepage?id=1019822449117696000',
        },
        {
          type: 3,
          url:
            'https://page.hemamax.com/hd/wow/h/act/rax/manual10251652240263034?spm=a225z.27033308.titlebar.share&position_material_id=3_124269795&dsl=rax&_hema_title_bar=false&pageId=98160&merchantCode=HM&siteCode=HM_8_1f273a2faebb4c02be71559dfb771c85_3&renderChannelCode=HM&shopId=193813409%2C235945109%2C235903240%2C190417236%2C232747349%2C234340026%2C292982260%2C656897406&slk_skip_tbpass=true&utm_shopinfo=1-193813409-11-1-0_3-234340026-11-0-2_3-656897406-11-0-2_3-235903240-11-0-2_3-235945109-11-0-2_3-232747349-11-0-2_3-292982260-11-0-18_5-190417236-11-0-7&share_user_id=33a71482f325bb2bcbaa78eb094360f5&utm_campaign=wechat&share_opentype=H5&spm_retrace=&outputtype=H5',
        },
        {
          type: 3,
          url: 'https://cuxiao.m.suning.com/scms/cdrdsgj0522.html?isSCMS=1',
        },
        {
          type: 3,
          url:
            'https://shop78196247.m.youzan.com/wscshop/feature/iBLTHNTnN0?sub_kdt_id=78004079',
        },
        {
          type: 3,
          url: 'https://mp.weixin.qq.com/s/tXeyCNjRTk6jb5RvRhorzw',
        },
        {
          type: 3,
          url: 'https://mp.weixin.qq.com/s/tXeyCNjRTk6jb5RvRhorzw',
        },

        {
          type: 3,
          url: 'https://www.aokwa.com/html/20220520/index.html',
        },
        { type: 2, img: require('../../assets/imgs/chuanye.png') },
        { type: 2, img: require('../../assets/imgs/laozihao.png') },
        { type: 2, img: require('../../assets/imgs/didong.png') },
        { type: 2, img: require('../../assets/imgs/nong.png') },
        { type: 2, img: require('../../assets/imgs/1802.png') },
        { type: 2, img: require('../../assets/imgs/71.png') },
        {
          type: 3,
          url: 'https://mp.weixin.qq.com/s/P-LmeXXF4qUkelzuG352kA',
        },
        { type: 2, img: require('../../assets/imgs/pupu.png') },
        {
          type: 3,
          url: 'https://tb.ele.me/wow/alsc/mod/16ab613a57b707550f822da3',
        },
        // {
        //   type: 3,
        //   url: 'https://render.alipay.com/p/c/180020570000009382/morpho.html',
        // },
        {
          type: 3,
          url:
            'https://pro.m.jd.com/mall/active/aR867ENZvvSbPs6pu1dr8VGp9ik/index.html',
        },
      ],
    };
  },
  methods: {},
  mounted() {},
  methods: {
    jump(type, item) {
      this.current = item;
      if (type != 3) {
        return;
      }
      location.href = item.url;
    },
    closeFn() {
      this.current = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin-bottom: 100px;
  position: relative;
  p.hot {
    width: 90%;
    left: 5%;
    height: 5rem;
    position: absolute;
    z-index: 1;
    top: 10rem;
    &:nth-child(3) {
      top: 16rem;
    }
    &:nth-child(4) {
      top: 22rem;
    }
    &:nth-child(5) {
      top: 27.8rem;
    }
    &:nth-child(6) {
      top: 34rem;
    }
    &:nth-child(7) {
      top: 40rem;
    }
    &:nth-child(8) {
      top: 47rem;
    }
    &:nth-child(9) {
      top: 54rem;
    }
    &:nth-child(10) {
      top: 60.2rem;
    }
    &:nth-child(11) {
      top: 67.8rem;
    }
    &:nth-child(12) {
      top: 74.6rem;
    }
    &:nth-child(13) {
      top: 81.5rem;
    }
    &:nth-child(14) {
      top: 88rem;
    }
    &:nth-child(15) {
      top: 95rem;
    }
    &:nth-child(16) {
      top: 101.5rem;
    }
    &:nth-child(17) {
      top: 108rem;
    }
    &:nth-child(18) {
      top: 115rem;
    }
  }
}
</style>
